<!-- 首页物品展示 -->
<template>
  <div class="center">
    <!-- 顶部模块 -->
    <div class="searching">
      <!-- 搜索 -->
      <div style="display: flex; justify-content: center">
        <!-- 返回按钮 -->
        <div class="home_page">
          <el-button
            icon="el-icon-back"
            size="small"
            plain
            @click="$router.go(-1)"
          >
            返回
          </el-button>
        </div>
        <!-- logo -->
        <span class="logo" @click="$router.push({ name: 'home' })">
          艺术品交易平台
        </span>
      </div>
    </div>

    <!-- 导航条 -->
    <div class="hierarchy">
      <span class="el-icon-location"></span>
      <span style="border-left: 3px solid #99a9bf"></span>
      <span @click="$router.push({ name: 'home' })" style="cursor: pointer">
        艺术品交易平台
      </span>
      <span style="border-left: 3px solid #99a9bf"></span>
      <span>艺术品</span>
    </div>

    <!-- 物品详情 -->
    <div class="articles">
      <div class="articles_left">
        <div>
          <img
            :src="'http://127.0.0.1:8000' + item_information.image"
            alt=""
            width="450px"
            height="350px"
          />
        </div>
      </div>
      <div class="articles_right">
        <div class="btns">
          <span
            class="buyInforBtn"
            :class="{ active: showPriceSection }"
            @click="showPrice"
            >价格</span
          >
          <span
            class="artInforBtn"
            :class="{ active: showDescriptionSection }"
            @click="showDescription"
            >作品信息</span
          >
        </div>
        <div class="articles_details" v-if="showPriceSection">
          <div>
            <span style="color: red; font-size: 30px; font-weight: bold"
              >￥{{ item_information.price }}</span
            >
          </div>
          <div class="classify">
            <ul>
              <li>
                <img
                  src="https://cdn.ywart.com/content/image/原创.png"
                  alt=""
                  style="width: 14px; height: 14px"
                />
                原创
              </li>
              <li>
                <img
                  src="https://cdn.ywart.com/content/image/原创.png"
                  alt=""
                  style="width: 14px; height: 14px"
                />
                无装裱
              </li>
            </ul>
          </div>

          <div style="">
            <span>特别提醒：</span>
            <span style="color: #99a9bf; font-size: 20px; font-weight: normal"
              >该作品为版权交易，一经更改概不退换，谨慎购买，诚信交易</span
            >
          </div>
          <div class="quantity">
            <div>
              <el-button
                type="primary"
                icon="el-icon-shopping-cart-full"
                @click="addShoppingCart"
                v-if="user.is_superuser == false && user.role == 1"
              >
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
        <div class="articles_description" v-if="showDescriptionSection">
          <div>
            作品名称：<span style="font-size: 20px; font-weight: normal">{{
              item_information.title
            }}</span>
          </div>
          <div>
            作者：<span style="font-size: 20px; font-weight: normal">{{
              item_information.artist.real_name
            }}</span>
          </div>
          <div>
            作品简述：<span style="font-size: 20px; font-weight: normal">{{
              item_information.description
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论发布模块 -->
    <div class="pop_up">
      <el-form action="" ref="ratingData" :model="ratingData">
        <div class="pop_up_text">快来发表评论吧</div>
        <div style="display: flex">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入评论内容"
            v-model="ratingData.content"
          >
          </el-input>
          <el-button type="primary" style="padding: 10px" @click="verification"
            >发布评论</el-button
          >
        </div>
      </el-form>
    </div>

    <!-- 评论区 -->
    <div class="comments">
      <div class="notes_title text">评论区</div>
      <div class="scrolling" id="crolling">
        <div v-for="(comment, index) in comments_data" :key="index">
          <div class="omments_one">
            <div class="head_shot">
              <img
                src="../../public/images/tx.png"
                alt=""
                width="40"
                height="40"
              />
              <div>{{ comment.user.real_name }}</div>
            </div>
            <div class="comment_details">
              <div class="comment_details_text">{{ comment.content }}</div>
              <div class="comment_tags">
                <p>发布时间:{{ comment.created_at }}</p>
                <div style="display: flex; align-items: center">
                  <svg
                    t="1709605628741"
                    class="icon"
                    viewBox="0 0 1127 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="16833"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M1108.468296 824.890547C1159.055032 910.219597 1097.227863 1024 990.429373 1024L130.432879 1024C29.258031 1024-32.574625 910.219597 18.012112 824.890547L450.825613 68.266574C473.306472 22.754136 518.276424 0 563.240888 0 608.209469 0 653.173934 22.754136 675.660283 68.266574L1108.468296 824.890547 1108.468296 824.890547 1108.468296 824.890547 1108.468296 824.890547ZM1020.384123 877.110641 1019.583053 875.735153 586.77504 119.111177 583.854223 113.62523C580.333998 106.500274 573.244216 102.4 563.240888 102.4 553.240806 102.4 546.151071 106.500212 542.636068 113.61633L539.710577 119.111663 106.096287 877.110641C95.301134 895.319767 109.937021 921.6 130.432879 921.6L990.429373 921.6C1016.30634 921.6 1031.298263 895.520476 1020.384123 877.110641L1020.384123 877.110641 1020.384123 877.110641 1020.384123 877.110641ZM558.08319 307.2C532.482248 307.2 512 322.819385 512 342.344809L512 579.251379C512 598.776801 532.482248 614.4 558.08319 614.4L568.321812 614.4C593.922749 614.4 614.4 598.776801 614.4 579.251379L614.4 342.344809C614.4 322.819385 593.922749 307.2 568.321812 307.2L558.08319 307.2 558.08319 307.2 558.08319 307.2 558.08319 307.2ZM512 766.885176C512 780.001705 517.522432 793.032632 526.999818 802.305669 536.477199 811.577487 549.797038 816.975247 563.200625 816.975247 576.602962 816.975247 589.927798 811.577487 599.405184 802.305669 608.882565 793.032632 614.4 780.001705 614.4 766.885176 614.4 753.772319 608.882565 740.741391 599.405184 731.469573 589.927798 722.19776 576.602962 716.8 563.200625 716.8 549.797038 716.8 536.477199 722.19776 526.999818 731.469573 517.522432 740.741391 512 753.772319 512 766.885176L512 766.885176 512 766.885176 512 766.885176Z"
                      fill="#2c2c2c"
                      p-id="16834"
                    ></path>
                  </svg>
                  <span><a href="">举报</a></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getartworkid } from "@/api/artworks";
import { shoppingCart } from "@/api/order";
import { postRating, getRating } from "@/api/rating";
import { mapState } from "vuex";
import { Message } from "element-ui";
export default {
  data() {
    return {
      id: "",
      // 当前页面物品数据
      item_information: {
        // 艺术品id
        id: "",
        // 艺术品名称
        title: "",
        // 艺术品价格
        price: "",
        // 艺术品作者
        artist: {
          // 艺术品作者id
          id: "",
          // 艺术品作者姓名
          real_name: "",
        },
        // 艺术品简介
        description: "",
        // 艺术品图片
        image: "",
      },

      // 控制作品信息与价格的显示与隐藏
      showPriceSection: true,
      showDescriptionSection: false,
      // 加入购物车数据
      cartData: {
        buyer: "", //买家id
        artwork: "", //作品id
        original_artist:"", //原作者id
      },
      // 发送评论数据
      ratingData: {
        // 作品id
        artwork: "",
        // 买家id
        user: "",
        // 评分
        score: null,
        // 内容
        content: "",
      },
      // 保存全部评论
      comments_data: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },

  created() {
    this.item_info(this.$route.query.id);
    setTimeout(() => {
      this.get_all_comments();
    }, 500);
  },
  methods: {
    // 获取物品信息
    item_info(id) {
      getartworkid(id).then((res) => {
        this.item_information = res.results;
      });
    },
    // 显示价格
    showPrice() {
      this.showPriceSection = true;
      this.showDescriptionSection = false;
    },
    // 显示简介
    showDescription() {
      this.showPriceSection = false;
      this.showDescriptionSection = true;
    },
    // 加入购物车
    addShoppingCart() {
      this.cartData.buyer = this.user.id;
      this.cartData.artwork = this.item_information.id;
      this.cartData.original_artist = this.item_information.artist.id;
      shoppingCart(this.cartData).then((res) => {
        console.log(res);
        Message({
          message: "加入购物车成功",
          type: "success",
        });
        // 跳转到购物车页面
        this.$router.push({ path: "/shoppingCart" });
      });
    },
    // 评论发布方法
    verification() {
      this.ratingData.user = this.user.id;
      // 作品id
      this.ratingData.artwork = this.$route.query.id;
      if (this.ratingData.content === "") {
        alert("不能发送空评论哦");
      } else {
        postRating(this.ratingData).then((res) => {
          console.log(res);
          Message({
            message: "评论发布成功",
            type: "success",
          });
          this.ratingData.content = "";
          this.get_all_comments();
        });
      }
    },
    // 获取所有评论
    get_all_comments() {
      getRating(this.item_information.id)
        .then((res) => {
          this.comments_data = res.comments;  
        })
        .catch((error) => {
          console.error("获取评论时出现错误:", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.center {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.home_page {
  position: absolute;
  top: 10px;
  left: 200px;
}

.logo {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  padding-right: 30px;
  font-weight: 700;
  font-size: 24px;
  border-left: 3px solid #99a9bf;
  cursor: pointer;
}

.input {
  margin-top: 8px;
}

/* 导航条 */
.hierarchy {
  display: flex;
  margin-bottom: 5px;
}

.hierarchy span {
  height: 20px;
  margin: 10px;
}

/* Articles 物品详情*/
.articles {
  display: flex;
  align-items: center;
  padding: 40px 50px 40px 50px;
}

.articles_left {
  width: 50%;
  margin-right: 50px;
}

.articles_right {
  position: relative;
  width: 70%;
  height: 400px;
  text-align: left;
  margin-left: 30px;

  .btns {
    display: flex;
    justify-content: space-between;
    height: 48px;
    border-bottom: solid 1px #dddddd;

    span {
      display: inline-block;
      height: 34px;
      border-bottom: solid 4px transparent;
      vertical-align: middle;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .classify {
    ul {
      display: flex;
    }
    ul li {
      list-style-type: none;
      margin-left: 10px;
    }
  }
}

.articles_details {
  width: 80%;
  font-size: 20px;
  font-weight: 700;
  /* display: flex; */
  /* flex-wrap: wrap; */
  padding: 10px;
}

.articles_details div {
  height: 40px;
  font-weight: 600;
  padding: 20px 0 0;
  line-height: 28px;
  font-size: 24px;
  font-weight: bold;
}

.articles_details div span {
  font-weight: 500;
}

.articles_description {
  width: 80%;
  font-size: 20px;
  font-weight: 700;
  /* display: flex; */
  /* flex-wrap: wrap; */
  padding: 10px;

  div {
    height: 40px;
    font-weight: 600;
    padding: 20px 0 0;
    line-height: 28px;
    font-size: 24px;
    font-weight: bold;
  }
}

.buyInforBtn.active {
  border-bottom: 4px solid #000;
}

.artInforBtn.active {
  border-bottom: 4px solid #000;
}

.inventory {
  padding: 10px;
  font-size: 20px;
  font-weight: 700;
}

.quantity {
  display: flex;
  padding: 10px;
}

.quantity div span {
  font-weight: 700;
}

.quantity div {
  margin-right: 10px;
  // margin-top:40px ;
}

.quantity input {
  width: 100px;
  height: 30px;
  border-radius: 0;
  border: 0px solid #000;
  outline: none;
  padding-left: 5px;
}

.collection {
  height: 36px;
}

/* 表单 */
.application_form {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 400px;
  background-color: rgb(255, 255, 255);
  z-index: 999;
  padding: 10px;
  overflow-y: scroll;
}

/* 评论区 */
.comments {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #e3ecf6;
  align-items: center;
}

.comments .scrolling {
  /* overflow-y: scroll;
  white-space: nowrap; */
}

.comments_title {
  position: absolute;
  top: 10px;
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: #d2d2d2;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  background-color: #7a7a7a;
}

.comments {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #e3ecf6;
  margin-bottom: 100px;
}

.omments_one {
  display: flex;
  padding: 10px;
  border-bottom: 2px solid #cfcfcf;
}

.head_shot {
  display: flex;
  width: 250px;
}

/* 评论头像 */
.head_shot img {
  background-color: #99a9bf;
  padding: 5px;
  margin-right: 10px;
  border-radius: 10px;
}

/* 评论名字 */
.head_shot div {
  margin-right: 10px;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  padding: 2px;
  font-weight: 700;
  color: #99a9bf;
}

.comment_details {
  padding: 5px;
  width: 930px;
}

.comment_details_text {
  word-wrap: break-word;
  font-size: 18px;
}

.comment_details img {
  width: 100px;
  height: 100px;
  margin-right: 5px;
  margin-top: 10px;
}

.comment_tags {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.comment_tags a {
  text-decoration: none;
  color: #000;
}

.comment_tags div span {
  padding: 0 10px 0 10px;
}

/* 评论发布模块 */
.release_comments {
  background-color: #edf1f5;
  margin-top: 50px;
  line-height: 50px;
  text-align: center;
  /* padding: 10px; */
}

.release_comments :hover {
  background-color: #b0bfd4;
  color: #ffffff;
}

.pop_up {
  width: 1180px;
  height: 100px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #e3ecf6;
  z-index: 999;
}

.pop_up_text {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 10px;
}
</style>
